<template>
    <div class="bookrack-cell-root">
        <router-link to="" class="book-box">
            <img :src="book.src" class="book">
            <div class="progress-box">
                <span class="progress"></span>
                <span class="progress-title">100%</span>
            </div>
        </router-link>
    </div>
</template>

<script>
    export default {
        name: "BookrackCell",
        props: ["book"],
    }
</script>

<style scoped lang="less">
    .book-box{
        position: relative;
    }
    .book {
        width: @s180;
        height: @s255;
        border-radius: 2vw;
        overflow: hidden;
    }

    .progress-box {
        position: absolute;
        left: 0;
        width: 100%;
        bottom: @s40;
        height: @s24;
        background-color: #fff;
        color: #686868;
        display: flex;

        box-shadow: 0px 0 5px 0 rgba(221, 221, 221, 0.5);

        span {
            display: inline-block;
            flex-shrink: 0;
        }
        .progress {
            width: 50%;
            height: @s12;
            background-color: #c3c3c3;
            margin: @s6 0;
            border-top-right-radius: @s12;
            border-bottom-right-radius: @s12;
        }
        .progress-title {
            font-size: @s20;
            line-height: @s24;
            position: absolute;
            right: @s9;
        }
    }
</style>